<link rel="stylesheet" href="./ext/xm-select-dark.css" media="all" />

<div id="demo1" class="xm-select-demo"></div><br>

<div id="demo2" class="xm-select-demo"></div><br>

<div id="demo3" class="xm-select-demo"></div><br>

<div id="demo4" class="xm-select-demo"></div><br>

<div id="demo5" class="xm-select-demo"></div><br>

<div id="demo6" class="xm-select-demo"></div><br>

<div id="demo7" class="xm-select-demo"></div><br>

<div id="demo8" class="xm-select-demo"></div><br>

<div id="demo9" class="xm-select-demo" style="width: 150px;"></div><br>

<div id="demo10" class="xm-select-demo"></div>

<br />
<div class="layui-form">
  <input type="checkbox" name="showFolderIcon" lay-filter="showFolderIcon" lay-skin="primary" title="是否展示三角图标" checked>
  <input type="checkbox" name="showLine" lay-filter="showLine" lay-skin="primary" title="是否显示虚线" checked>
  <input type="checkbox" name="strict" lay-filter="strict" lay-skin="primary" title="严格父子结构" checked>
  <input type="checkbox" name="simple" lay-filter="simple" lay-skin="primary" title="极简模式">

  <br /><br />
  <input type="checkbox" name="hidden" lay-filter="hidden" lay-skin="primary" title="隐藏父节点图标">
  <input type="checkbox" name="custom" lay-filter="custom" lay-skin="primary" title="自定义图标">
  <input type="checkbox" name="all" lay-filter="all" lay-skin="primary" title="展开所有节点">
  <input type="checkbox" name="close" lay-filter="close" lay-skin="primary" title="闭合所有节点">
  <input type="checkbox" name="key3" lay-filter="key3" lay-skin="primary" title="展开指定节点">

  <br /><br />
  <input type="checkbox" name="clickExpand" lay-filter="clickExpand" lay-skin="primary" title="clickExpand" checked>
  <input type="checkbox" name="clickCheck" lay-filter="clickCheck" lay-skin="primary" title="clickExpand" checked>

</div>

<div style="margin-top: 20px">间距</div>
<div id="slideTest1"></div>


<div id="demo11" class="xm-select-demo"></div>

<br />
<div class="layui-form">
  <input type="checkbox" name="strict2" lay-filter="strict2" lay-skin="primary" title="严格父子结构" checked>
  <input type="checkbox" name="hidden2" lay-filter="hidden2" lay-skin="primary" title="隐藏父节点图标">
  <input type="checkbox" name="custom2" lay-filter="custom2" lay-skin="primary" title="自定义图标">
</div>

<div style="margin-top: 20px">间距</div>
<div id="slideTest2"></div>



<script id="xm-select-script" src="https://cdn.jsdelivr.net/npm/xm-select@1.2.4/dist/xm-select.min.js"></script>
<script>

  loadScript('https://cdn.jsdelivr.net/npm/xm-select@1.2.4/dist/xm-select.min.js', function () {
    layui.use(function () {
      var $ = layui.$;
      var demo1 = window.xmSelect.render({
        el: '#demo1',
        tips: '你喜欢什么水果呢?',
        filterable: true,
        autoRow: true,
        data: [
          { name: '张三', value: 1, selected: true, disabled: true },
          { name: '李四', value: 2, selected: true },
          { name: '王五', value: 3 },
          { name: '桌子', value: 4, disabled: true },
        ]
      })

      var demo2 = xmSelect.render({
        el: '#demo2',
        empty: '呀, 没有数据呢',
        data: []
      })

      var demo3 = xmSelect.render({
        el: '#demo3',
        filterable: true,
        searchTips: '你想吃什么水果吧',
        data: [
          { name: '水果', value: 1 },
          { name: '蔬菜', value: 2 },
          { name: '桌子', value: 3 },
          { name: '北京', value: 4 },
        ]
      })

      var demo4 = xmSelect.render({
        el: '#demo4',
        filterable: true,
        paging: true,
        data: [
          { name: '张三', value: 1 },
          { name: '李四', value: 2 },
          { name: '王五', value: 3 },
          { name: '赵六', value: 4 },
          { name: '苹果', value: 5 },
          { name: '香蕉', value: 6 },
          { name: '凤梨', value: 7 },
          { name: '葡萄', value: 8 },
          { name: '樱桃', value: 9 },
          { name: '车厘子', value: 10 },
          { name: '火龙果', value: 11 },
        ]
      })


      var demo5 = xmSelect.render({
        el: '#demo5',
        filterable: true,
        remoteSearch: true,
        remoteMethod: function (val, cb, show) {
          $.ajax({
            type: 'get',
            url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
            data: {
              keyword: val,
            }
          }).then(response => {
            var res = response.data;
            cb(res.data)
          })
        },
      })

      var demo6 = xmSelect.render({
        el: '#demo6',
        radio: true,
        toolbar: { show: true },
        data: [
          { name: '张三', value: 1 },
          { name: '李四', value: 2 },
          { name: '王五', value: 3 },
        ]
      })

      var demo7 = xmSelect.render({
        el: '#demo7',
        model: {
          label: {
            type: 'block',
            block: {
              //最大显示数量, 0:不限制
              showCount: 1,
              //是否显示删除图标
              showIcon: true,
            }
          }
        },
        data: [
          { name: '张三', value: 1, selected: true },
          { name: '李四', value: 2, selected: true },
          { name: '王五', value: 3 },
        ]
      })

      var demo8 = xmSelect.render({
        el: '#demo8',
        toolbar: {
          show: true,
        },
        filterable: true,
        height: '500px',
        paging: true,
        pageSize: 2,
        data: [
          {
            name: '销售员', children: [
              { name: '张三1', value: 1 },
              { name: '李四1', value: 2 },
              { name: '王五13', value: 3 },
            ]
          },
          {
            name: '奖品', children: [
              { name: '苹果23', value: 4 },
              { name: '香蕉2', value: 5 },
              { name: '葡萄2', value: 6 },
            ]
          },
        ]
      })


      var demo9 = xmSelect.render({
        el: '#demo9',
        disabled: true,
        toolbar: {
          show: true,
        },
        autoRow: true,
        height: '500px',
        data: [
          { name: '张三1', value: 1, selected: true },
          { name: '李四1', value: 2, selected: true },
          { name: '王五1', value: 3, disabled: true },
          { name: '苹果2', value: 4, selected: true, disabled: true },
          { name: '香蕉2', value: 5, selected: true },
          { name: '葡萄2', value: 6 },
        ]
      })

      layui.form.render();

      ['showFolderIcon', 'showLine', 'strict', 'simple'].forEach(function (key) {
        layui.form.on('checkbox(' + key + ')', function (data) {
          var treeConfig = {};
          treeConfig[key] = data.elem.checked;
          demo1.update({
            tree: treeConfig
          })
        });
      })

      //控制显示父节点的图标
      layui.form.on('checkbox(hidden)', function (data) {
        demo1.update({
          iconfont: {
            parent: data.elem.checked ? 'hidden' : '',
          }
        })
      });

      //自定义图标
      layui.form.on('checkbox(custom)', function (data) {
        let iconfont = data.elem.checked ? {
          select: 'layui-icon layui-icon-chart',
          unselect: 'layui-icon-ok-circle',
          half: 'layui-icon layui-icon-table',
          parent: 'layui-icon layui-icon-survey',
        } : {
          select: '',
          unselect: '',
          half: '',
          parent: '',
        }
        demo1.update({
          iconfont: iconfont
        })
        layui.form.render();
      });

      //展开所有节点
      layui.form.on('checkbox(all)', function (data) {
        if (data.elem.checked) {
          demo1.changeExpandedKeys(true)
        }
      });

      //闭合所有节点
      layui.form.on('checkbox(close)', function (data) {
        if (data.elem.checked) {
          demo1.changeExpandedKeys(false)
        }
      });

      //展开指定节点
      layui.form.on('checkbox(key3)', function (data) {
        if (data.elem.checked) {
          demo1.changeExpandedKeys([-3])
        }
      });

      layui.form.on('checkbox(clickExpand)', function (data) {
        demo1.update({
          tree: {
            clickExpand: data.elem.checked
          }
        })
      });

      layui.form.on('checkbox(clickCheck)', function (data) {
        demo1.update({
          tree: {
            clickCheck: data.elem.checked
          }
        })
      });

      layui.slider.render({
        elem: '#slideTest1',
        min: 10,
        max: 100,
        showstep: true,
        input: true,
        tips: true,
        value: 20,
        change: function (value) {
          demo1.update({
            tree: {
              indent: value
            }
          })
        }
      });

      var demo10 = xmSelect.render({
        el: '#demo10',
        autoRow: true,
        filterable: true,
        tree: {
          show: true,
          showFolderIcon: true,
          showLine: true,
          indent: 20,
          expandedKeys: [-3],
        },
        toolbar: {
          show: true,
          list: ['ALL', 'REVERSE', 'CLEAR']
        },
        filterable: true,
        height: 'auto',
        data: function () {
          return [
            {
              name: '销售员', value: -1, disabled: true, children: [
                { name: '张三1', value: 1, selected: true, children: [] },
                { name: '李四1', value: 2, selected: true },
                { name: '王五1', value: 3, disabled: true },
              ]
            },
            {
              name: '奖品', value: -2, children: [
                {
                  name: '奖品3', value: -3, children: [
                    { name: '苹果3', value: 14, selected: true },
                    { name: '香蕉3', value: 15 },
                    { name: '葡萄3', value: 16 },
                  ]
                },
                { name: '苹果2', value: 4, selected: true, disabled: true },
                { name: '香蕉2', value: 5 },
                { name: '葡萄2', value: 6 },
              ]
            },
          ]
        }
      })

      var demo11 = xmSelect.render({
        el: '#demo11',
        autoRow: true,
        cascader: {
          show: true,
          indent: 200,
        },
        height: '200px',
        data() {
          return [
            {
              name: '销售员', value: -1, disabled: true, children: [
                { name: '张三1', value: 1, selected: true, children: [] },
                { name: '李四1', value: 2, selected: true },
                { name: '王五1', value: 3, disabled: true },
              ]
            },
            {
              name: '奖品', value: -2, children: [
                {
                  name: '奖品3', value: -3, children: [
                    { name: '苹果3', value: 14, selected: true },
                    { name: '香蕉3', value: 15 },
                    { name: '葡萄3', value: 16 },
                  ]
                },
                { name: '苹果2', value: 4, selected: true, disabled: true },
                { name: '香蕉2', value: 5 },
                { name: '葡萄2', value: 6 },
              ]
            },
          ]
        }
      })

      layui.form.render();

      ['strict2'].forEach(function (key) {
        layui.form.on('checkbox(' + key + ')', function (data) {
          var config = {};
          config[key] = data.elem.checked;
          demo1.update({
            cascader: config
          })
        });
      })

      //控制显示父节点的图标
      layui.form.on('checkbox(hidden2)', function (data) {
        demo1.update({
          iconfont: {
            parent: data.elem.checked ? 'hidden' : '',
          }
        })
      });
      //自定义图标
      layui.form.on('checkbox(custom2)', function (data) {
        let iconfont = data.elem.checked ? {
          select: 'layui-icon layui-icon-chart',
          unselect: 'layui-icon-ok-circle',
          half: 'layui-icon layui-icon-table',
          parent: 'layui-icon layui-icon-survey',
        } : {
          select: '',
          unselect: '',
          half: '',
          parent: '',
        }
        demo1.update({
          iconfont: iconfont
        })
        layui.form.render();
      });


      layui.slider.render({
        elem: '#slideTest2',
        min: 50,
        max: 400,
        showstep: true,
        input: true,
        tips: true,
        value: 200,
        change: function (value) {
          demo1.update({
            cascader: {
              indent: value
            }
          })
        }
      });


    })
  })


</script>